<template>
	<div id="app">
		<!--开启缓存-->
		<keep-alive>
			<transition name="right-slide"
			            mode="out-in">
				<router-view></router-view>
			</transition>
		</keep-alive>
		<tab-bar></tab-bar>
	</div>
</template>

<script>
import TabBar from 'components/tab-bar';

export default {
	components : {
		TabBar
	}
};
</script>
<style lang="scss" scoped>
.common {
	opacity: 1;
	transform: scaleY(1);
	transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.1s,
		opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
	transform-origin: center top;
}
/*从下往上进入*/
.pull-up-enter-active,
.pull-up-leave-active {
	@extend .common;
	transform-origin: center bottom;
}
.pull-up-enter,
.pull-up-leave-active {
	opacity: 0;
	transform: scaleY(0);
}
/*从上往下进入*/
.drop-down-enter-active,
.drop-down-leave-active {
	@extend .common;
	transform-origin: center top;
}
.drop-down-enter,
.drop-down-leave-active {
	opacity: 0;
	transform: scaleY(0);
}
/*从右往左进入*/
.right-slide-enter,
.right-slide-leave-active {
	transform: translateX(100%);
}
.right-slide-leave-active,
.right-slide-enter-active {
	transition: all 0.3s;
}
/*从左往右进入*/
.slide-right-enter,
.slide-right-leave-active {
	transform: translateX(-100%);
}

.slide-right-leave-active,
.slide-right-enter-active {
	transition: all 0.3s 0.3s cubic-bezier(0.33, 0.25, 0.33, 1);
}
</style>
